<template>
  <div>
    <!-- <div class="app-main-content-box">

      <AppMainTitle title="配送管理" :marginBottom="0" />
    </div>-->

    <!-- 未开通 start -->
    <div v-if="list.length===0" class="empty-container app-main-content-box">
      <div class="img">
        <img src="@/assets/icon/i-no-auth.png" alt>
      </div>
      <div class="msg">商城还未入驻店铺，快去入驻第一家店铺吧</div>
      <el-button type="primary" size="small" round @click="goWxaMallShopManage">跳转店铺管理</el-button>
    </div>
    <!-- 未开通 end -->

    <!-- 已开通 start-->
    <div v-else class="shop-container">
      <!-- left 列表 -->
      <div class="left-container">
        <div class="menu-box">
          <div class="filter">
            <!-- <div class="title">店铺列表</div> -->
            <el-input v-model="filterVal" placeholder="请输入名称搜索" size="small" />
          </div>
          <div class="content">
            <!-- <el-button
              type="text"
              size="small"
              round
              icon="el-icon-plus"
              class="add-btn"
              @click="addStore"
            >入驻新店铺</el-button>-->
            <div
              v-for="item in list"
              :key="item.storeId"
              :class="[item.storeId===activeStore.storeId?'active':'']"
              class="item"
              :title="'id:'+item.storeId"
              @click="clickMenu(item)"
            >
              {{ item.name }}
              <span v-if="item.disabled" class="app-text-color-danger">(已关停)</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="tab-container">
          <AppMainTitle :title="activeStore.name" :margin-bottom="0" />
          <el-tabs v-model="tabName">
            <el-tab-pane label="快递配送" name="express" />
            <el-tab-pane label="同城配送" name="local" />
            <el-tab-pane label="到店自提" name="selfPickup" />
            <!-- <el-tab-pane label="发货地址" name="support" />
            <el-tab-pane label="收货地址" name="support" />-->
          </el-tabs>
        </div>

        <div class="app-main-content-box">
          <ExpressForm v-if="tabName==='express'" ref="expressForm" :active-store="activeStore" />
          <LocalForm v-if="tabName==='local'" ref="localForm" :active-store="activeStore" />
          <SelfPickupForm
            v-if="tabName==='selfPickup'"
            ref="selfPickupForm"
            :active-store="activeStore"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { storeList } from '@/views/wxaMallModule/api/shop'
import ExpressForm from './compoment/ExpressForm'
import LocalForm from './compoment/LocalForm'
import SelfPickupForm from './compoment/SelfPickupForm'
export default {
  components: {
    ExpressForm,
    LocalForm,
    SelfPickupForm
  },
  data() {
    return {
      // 配置
      tabName: 'express',
      // 状态
      loading: false,
      // 数据
      filterVal: '',
      activeStore: {
        storeId: null,
        name: null
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 获取数据
    this.fetchData()
  },
  methods: {
    /**
       * 数据组
       */

    // 获取数据
    fetchData() {
      this.loading = true
      Promise.all([this.getShopList()])
        .then(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 获取门店列表
    getShopList(mode = null) {
      return new Promise((resolve, reject) => {
        storeList()
          .then(res => {
            this.list = res.data
            if (res.data.length > 0) {
              if (mode === 'add') {
                this.activeStore = res.data[res.data.length - 1]
              } else if (!this.storeId) {
                this.activeStore = res.data[0]
              }
            }
          })
          .catch(err => {})
          .finally(() => {
            resolve()
          })
      })
    },

    /**
       * 按钮组
       */
    // 跳转店铺管理
    goWxaMallShopManage() {
      this.$router.push({
        name: 'WxaMallShopManage'
      })
    },

    // 选择门店
    clickMenu(item) {
      this.activeStore = item
    }

    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 未开通 */
  .empty-container {
    padding: 50px 0;
    text-align: center;
    .img {
      margin: 0 auto;
      width: 307px;
      height: 278px;
    }
    .msg {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }
  }

  /* 门店 */
  .shop-container {
    display: flex;
    margin-top: 10px;
    .left-container {
      flex: 0 0 200px;
    }
    .right-container {
      flex: 1;
      .right-head {
        margin-bottom: 20px;
        .shop-name {
          margin-right: 10px;
          font-size: 20px;
          font-weight: bold;
        }
      }
      .el-textarea,
      .el-select {
        width: 500px;
      }
    }
  }

  /* 门店列表 */
  .menu-box {
    margin-right: 10px;
    background-color: #fff;
    border-radius: 5px;
    min-height: 500px;
    .filter {
      padding: 10px;
    }
    .content {
      font-size: 14px;
      .add-btn {
        width: 100%;
      }
      .item {
        cursor: pointer;
        padding: 10px;
        width: 100%;
      }
      .active {
        color: #fff;
        background-color: $primary;
      }
    }
  }

  /* tab */
  .tab-container ::v-deep {
    padding: 24px 30px 0;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
